﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- This is a DynAjax sample page -->
<!-- This demonstrates DynAjax use with simple login / logout methods calls -->
<head id="PageHead" runat="server">
    <title>:: DYNAJAX - TEST PAGE - LOGIN / LOGOUT ::</title>
    <script type="text/javascript" src="javascript/prototype.js"></script>
    <script type="text/javascript" src="javascript/dynAjax.aspx"></script>
    <!-- CSS Style for DynAjax sample page -->
	<style type="text/css">
        * {margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}
        a {color:#707070;}
        .link {cursor:pointer}
        .selectPane {border:solid 1px #555555;padding:2px 25px 0px 25px;background-color:#ffffff;}
        .codeDetail {border:solid 1px #555555;display:none;padding:8px;}
        .info {color:#555555;}
        .comment {color:#007000;}
        .code {color:#0000cc;font-weight:bold;}
        .indent {padding-left:25px;}
        .dynamicUpdate {border-bottom:dotted 1px #999999;}
        #loadingDiv {position:absolute;left:20px;top:25px;font-size:12px;background-color:#88bbff;padding:3px 10px 3px 10px;}
	</style>
</head>
<body onload="initPage();">
    <center><h1>DynAjax sample page - Login / Logout</h1></center>
    <br /><br />

    <div id="loginDiv" style="background-color:#dedede;padding: 5px 5px 5px 50px;">
        <table>
            <tr>
                <td style="text-align:right;padding-right:10px;">Login</td>
                <td><input id="login" type="text" /></td>
            </tr>
            <tr>
                <td style="text-align:right;padding-right:10px;">Password</td>
                <td><input id="password" type="password" /></td>
            </tr>
            <tr>
                <td colspan="2">Asynchronous login <input type="button" value="login" onclick="asyncLoginUser();" /></td>
            </tr>
            <tr>
                <td colspan="2">Synchronous login <input type="button" value="login" onclick="loginUser();" /></td>
            </tr>
        </table>
        <span id="loginLoadingDiv"><img src="images/loading.gif" /></span>
        <span id="loginErrorDiv" style="color:#990000;">--- Login failed ---</span>
        <br />
        <span style="font-size:12px;color:#444444;"><i>Note: server login method will success if login not empty and login equals password<br />
        <b>Example:</b> enter 'john' / 'john'</i><br />
        --- Server side method includes a Thread sleep of 500 ms in order to see asynchronous login animation ---</span><br />
    </div>

    <!-- Information div -->
    <div id="infoDiv" style="background-color:#dedede;padding-left:50px;display:none;">
        <b>--- DynAjax works ---</b><br /><br />
        You're logged in !!<br />
        your login is '<b><span id="loginDynInfo"></span></b>'.<br />
        <br />
        <input type="button" value="logout" onclick="logoutUser();" />
    </div>
    
    <br />

    <div style="background-color:#dedede;font-size:11px;padding-left:30px;">
        &nbsp;&nbsp;&nbsp;&nbsp;<b>DynAjax [v1.06]</b><br />
        Visit <a href="http://wiki.dynajax.org" target="dynaWiki">DynAjax Wiki</a> or
        <a href="http://www.dynajax.org" target="dynaSF">DynAjax web site</a>
        for documentation and sources.<br />
        Download: <a href="http://download.dynajax.org/" target="dynaRelease">DynAjax last release on CodePlex</a><br />
        Contact: <a href="mailto:admin@dynajax.org">admin@dynajax.org</a>.<br />
        Company support: <a href="http://www.odesys.fr" target="odesys">Odesys</a>.
    </div>
</body>

<!-- JAVASCRIPT -->
<script type="text/javascript">
    function initPage() {
        checkAuthentication();
    }

    // DynAjax methods can be called on synchronous way
    // simply set only the correct number of arguments, the result is returned and you can
    // get it into a variable (var response = ...) - really easy to use !!
    function loginUser() {
        var response = SessionManager.loginUser($('login').value, $('password').value);
        if (response == "ok") {
            $('loginErrorDiv').style.display = "none";
            checkAuthentication();
        }
        else {
            $('loginErrorDiv').style.display = "block";
        }
    }

    // DynAjax methods can be called on asynchronous way
    // simply add a function to parameters : done !! (really a peace of cake)
    function asyncLoginUser() {
        $('loginLoadingDiv').style.display = "block";
        $('loginErrorDiv').style.display = "none";
        SessionManager.loginUser($('login').value, $('password').value, function(response) {
            if (response == "ok") {
                $('loginErrorDiv').style.display = "none";
                checkAuthentication();
            }
            else {
                $('loginErrorDiv').style.display = "block";
                $('loginLoadingDiv').style.display = "none";
            }
        });
    }
    
    // Call logout on server to clear session data
    function logoutUser() {
        var response = SessionManager.logoutCurrentUser();
        if (response == "ok") {
            $('loginErrorDiv').style.display = "none";
            checkAuthentication();
        }
        else {
            $('loginErrorDiv').style.display = "block";
        }
    }
    
    // Check authentication method
    function checkAuthentication() {
        if (SessionManager.checkAuthentication() == true) {
            $('loginDiv').style.display = "none";
            $('infoDiv').style.display = "block";
            // Call server via DynAjax to get user login from Session data and display it
            $('loginDynInfo').innerHTML = SessionManager.getCurrentUserLogin();
        }
        else {
            $('loginErrorDiv').style.display = "none";
            $('loginDiv').style.display = "block";
            $('infoDiv').style.display = "none";
            $('login').focus();
        }
        $('loginLoadingDiv').style.display = "none";
    }
</script>
</html>
